<template>
  <el-row type="flex" justify="space-around">
    <el-col :span="16">
      <el-row type="flex" justify="space-around">
        <el-col :span="11"><mygird></mygird></el-col>
        <el-col :span="11"><mymap></mymap></el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="24">
          <el-card>
            <div slot="header" class="clearfix">
              <el-divider direction="vertical"></el-divider
              ><span>近30天统计</span>
              <el-tabs
                v-model="activeName"
                @tab-click="handleClick"
                style="float: right; padding: 3px 0"
              >
                <el-tab-pane label="加载总时间" name="first"></el-tab-pane>
                <el-tab-pane label="运行总时间" name="second"></el-tab-pane>
              </el-tabs>
            </div>
            <chart style="width: 100%"></chart>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="8">
      <el-card>
        <div slot="header" class="clearfix">
          <el-divider direction="vertical"></el-divider><span>待处理任务</span>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="设备名称"> </el-table-column>
          <el-table-column prop="des" label="任务描述"> </el-table-column>
          <el-table-column prop="from" label="任务来源"> </el-table-column>
          <el-table-column prop="time" label="发布时间"> </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import mygird from "./gird";
import mymap from "./map";
import chart from "./chart";
export default {
  components: {
    mygird,
    mymap,
    chart,
  },
  data() {
    return {
      activeName: "second",
      tableData: [
        {
          name: "智物联测试设备01",
          des: "锅炉水位偏高",
          from: "告警",
          time: "11/28 11:25",
        },
        {
          name: "智物联测试设备02",
          des: "锅炉水位偏高",
          from: "告警",
          time: "11/28 11:18",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.el-divider--vertical {
  width: 2px;
  background-color: mediumblue;
}
.el-tabs__content {
  display: none;
}
</style>